<script setup>
import {ref, onMounted, onUnmounted, getCurrentInstance} from 'vue';
import {useRouter, useRoute} from "vue-router";

//在会话列表页的<script setup lang="ts">中新增：
import {ElInput, ElButton, ElDialog} from 'element-plus'; // 新增需要的组件
// 定义Group类型（在脚本顶部）
// 用 JSDoc 描述 Group 数据结构（替代 interface）
/**
 * @typedef {Object} Group
 * @property {string} id - 群ID
 * @property {string} groupName - 群名称
 * @property {string} ownerId - 群主ID
 * @property {string} createTime - 创建时间
 */

// 修正 userGroups 定义：明确为数组类型的响应式变量a
const userGroups = ref([]); // 用户的群列表（数组类型）

// 群聊相关响应式变量
const groupDialogVisible = ref(false); // 创建群聊弹窗
const groupName = ref(''); // 群名称输入

// 路由相关
const router = useRouter();
const route = useRoute();
const {query} = useRoute();

const global = getCurrentInstance().appContext.config.globalProperties;

// 初始化空的聊天列表
const chats = ref([]);
// 用户的名字
const userName = ref();
// WebSocket相关状态
const ws = ref(null);
const isConnected = ref(false);

// 工具函数：从Token解析用户ID
const getUserIdFromToken = (token) => {
  if (!token) return '';
  try {
    const payloadBase64 = token.split('.')[1];
    const decoded = JSON.parse(atob(payloadBase64));
    return decoded.sub;
  } catch (error) {
    console.error('Token解析失败:', error);
    return '';
  }
};

// 获取用户ID
const token = localStorage.getItem('token');
if (!token) {
  console.log('未检测到登录态(无token)，请先登录');
}
const userId = getUserIdFromToken(token);
if (!userId) {
  console.log("未获取到用户ID，请先登录");
} else {
  console.log("成功获取用户ID:" + userId);
}

// 格式化时间显示（保持不变）
const formatTime = (timeString) => {
  const date = new Date(timeString);
  const now = new Date();

  if (date.toDateString() === now.toDateString()) {
    return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
  }

  const yesterday = new Date(now);
  yesterday.setDate(now.getDate() - 1);
  if (date.toDateString() === yesterday.toDateString()) {
    return '昨天';
  }

  if (date.getFullYear() === now.getFullYear()) {
    return `${date.getMonth() + 1}月${date.getDate()}日`;
  }

  return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
};

/*// 处理选择聊天
const handleSelectChat = (chat) => {
  console.log('进入聊天:', chat.name);
  console.log(`进入与 ${chat.name} 的聊天`);
  chat.unreadCount = 0;
  // 路由跳转到聊天详情页，并传递关键参数
  router.push({
    // 1. path：聊天详情页的路由路径
    path: '/ChatDetail',
    // 2. params：传递参数（详情页需要的对方信息、当前用户ID等）
    query: {
      friendId: chat.id,        // 聊天对象的ID（核心参数）
      friendName: chat.name,    // 聊天对象的名称
      friendAvatar: chat.avatar || '', // 聊天对象的头像
      currentUserId: userId     // 当前登录用户ID
    }
  });
};*/

// 处理添加新聊天
const handleAddChat = () => {
  // 替换 ElMessage.info 为 console.log
  console.log('打开新建聊天对话框');
};

// ------------------- 根据用户ID获取好友详情（用于生成会话） -------------------
const getFriendInfo = async (friendId) => {
  try {
    const resp = await global.$http.get(`http://localhost:8030/user/selectAllById/${friendId}`);
    return {
      id: friendId,          // 会话ID=好友ID
      name: resp.data.username, // 好友名称
      avatar: resp.data.avatar || '', // 好友头像
      lastMessage: '点击开始聊天', // 初始消息
      lastMessageTime: new Date().toISOString(), // 当前时间
      unreadCount: 0,        // 未读消息数
      isGroup: false         // 非群聊
    };
  } catch (err) {
    console.error(`获取好友${friendId}详情失败:`, err);
    return {
      id: friendId,
      name: `用户${friendId}`,
      avatar: '',
      lastMessage: '点击开始聊天',
      lastMessageTime: new Date().toISOString(),
      unreadCount: 0,
      isGroup: false
    };
  }
};
// --------------------------------------------------------------------------------

// 初始化WebSocket连接
const initWebSocket = () => {
  if (!userId || !token) return;

  // WebSocket连接地址（与聊天详情页一致）
  const wsUrl = `ws://localhost:8030/chat/${userId}?token=${encodeURIComponent(token)}`;
  ws.value = new WebSocket(wsUrl);
  ws.value.withCredentials = true;

  // 连接成功
  ws.value.onopen = () => {
    isConnected.value = true;
    // 替换 ElMessage.success 为 console.log
    console.log('WebSocket连接成功，已进入在线状态');
    // ------------------- 依赖后端在线用户广播 -------------------
  };

  // 接收消息（核心改动：处理在线用户和聊天消息）
  // 调整WebSocket的onmessage逻辑：合并历史会话与新消息
  ws.value.onmessage = async (event) => {
    try {
      const message = JSON.parse(event.data);

      // 处理在线用户广播（可选保留，用于显示在线状态）
      if (message.friends) {
        // 无需修改现有在线用户逻辑，仅补充：若历史会话有该用户，标记在线状态（可选）
        chats.value.forEach(chat => {
          chat.isOnline = message.friends.includes(chat.id);
        });
      }
      // 处理新聊天消息（调整为与历史会话合并）
      else if (message.sender && message.content) {
        const senderId = await getFriendIdByUsername(message.sender);
        const newChatData = {
          id: senderId,
          name: message.sender,
          avatar: chats.value.find(c => c.id === senderId)?.avatar || '',
          lastMessage: message.content,
          lastMessageTime: new Date().toISOString(),
          unreadCount: 1,
          isGroup: false,
          isOnline: true // 新消息发送者一定在线
        };

        // 合并逻辑：若历史会话已有该用户，更新；若无，新增到最前面
        const existingIndex = chats.value.findIndex(chat => chat.id === senderId);
        if (existingIndex > -1) {
          newChatData.unreadCount = chats.value[existingIndex].unreadCount + 1;
          chats.value.splice(existingIndex, 1, newChatData);
        } else {
          // 新增会话（补充好友详情）
          const newChat = await getFriendInfo(senderId);
          Object.assign(newChat, newChatData);
          chats.value.unshift(newChat);
        }
      }
    } catch (err) {
      console.error('解析WebSocket消息失败:', err);
    }
  };


  // 连接关闭
  ws.value.onclose = () => {
    isConnected.value = false;
    // 替换 ElMessage.warning 为 console.log
    console.log('WebSocket连接已关闭');
    setTimeout(initWebSocket, 3000);
  };

  // 连接错误
  ws.value.onerror = (error) => {
    isConnected.value = false;
    console.log(`WebSocket错误: ${error.message}`);
  };
}

// ------------------- 根据用户名查用户ID（用于匹配会话） -------------------
const getFriendIdByUsername = async (username) => {
  // 先从现有会话查，避免重复请求
  const existingChat = chats.value.find(c => c.name === username);
  if (existingChat) return existingChat.id;

  // 现有会话没有则查所有用户（实际项目建议后端加“按名称查ID”接口，这里临时用现有接口遍历）
  try {
    // 注意：这里假设你有“获取所有用户”的接口，若没有可替换为后端提供的其他接口
    const resp = await global.$http.get(`http://localhost:8030/user/getAll`);
    const user = resp.data.find(u => u.username === username);
    return user ? user.id.toString() : 'unknown';
  } catch (err) {
    console.error(`根据名称${username}查ID失败:`, err);
    return 'unknown';
  }
};
// --------------------------------------------------------------------------------

// ------------------- 加载历史聊天记录对应的会话 -------------------
const loadHistoryChats = async () => {
  if (!userId) return;
  try {
    // 1. 调用后端新增接口，获取所有有历史记录的好友ID
    const resp = await global.$http.get(`http://localhost:8030/user/chat/history/list`, {
      params: {userId: userId}
    });
    const historyFriendIds = resp.data; // 后端返回的好友ID集合（如 ["1", "4"]）
    // 若没有历史记录，清空列表（显示“暂无会话”）
    if (historyFriendIds.length === 0) {
      chats.value = [];
      return;
    }
    if (!historyFriendIds || historyFriendIds.length === 0) return;

    // 2. 为每个好友ID获取详情，生成会话（复用现有getFriendInfo函数）
    const historyChats = [];
    for (const friendId of historyFriendIds) {
      const chat = await getFriendInfo(friendId);
      // 3. 关键：补充该好友的最后一条历史消息（从Redis查询）
      const lastMsg = await getLastHistoryMessage(userId, friendId);
      if (lastMsg) {
        chat.lastMessage = lastMsg.content; // 覆盖初始消息为最后一条历史消息
        chat.lastMessageTime = new Date(lastMsg.time).toISOString(); // 历史消息时间
      }
      historyChats.push(chat);
    }

    // 4. 按最后消息时间排序（最新的在前）
    historyChats.sort((a, b) => new Date(b.lastMessageTime) - new Date(a.lastMessageTime));
    chats.value = historyChats; // 赋值历史会话列表
  } catch (err) {
    console.error('加载历史会话失败:', err);
    console.log('历史会话加载失败');
  }
};

// ------------------- 获取两个用户间的最后一条历史消息 -------------------
const getLastHistoryMessage = async (userId, friendId) => {
  try {
    // 安全生成 Redis 键（小ID:大ID）
    let smallId, bigId;
    // 若ID是数字字符串，按数值比较；否则按字符串长度比较
    if (!isNaN(Number(userId)) && !isNaN(Number(friendId))) {
      smallId = Number(userId) < Number(friendId) ? userId : friendId;
      bigId = Number(userId) > Number(friendId) ? userId : friendId;
    } else {
      // 非数字ID：按字符串长度比较（或根据实际规则调整）
      smallId = userId.length < friendId.length ? userId : friendId;
      bigId = userId.length > friendId.length ? userId : friendId;
    }
    const redisKey = "chat:history:" + smallId + ":" + bigId;

    // 调用后端历史记录接口，获取最后一条消息（Redis List的最后一个元素）
    const resp = await global.$http.get(`http://localhost:8030/user/chat/history`, {
      params: {userId: userId, friendId: friendId}
    });
    const historyList = resp.data;
    if (historyList && historyList.length > 0) {
      // 返回最后一条消息（已转为对象）
      return JSON.parse(historyList[historyList.length - 1]);
    }
  } catch (err) {
    console.error('获取最后一条历史消息失败:', err);
  }
  return null;
};

// 1. 加载用户的群列表（在loadHistoryChats后调用，合并到chats数组）
const loadUserGroups = async () => {
  if (!userId) return;
  try {
    // 调用后端/group/user/{userId}接口
    const resp = await global.$http.get(`http://localhost:8030/group/user/${userId}`);
    userGroups.value = resp.data;
    // 将群列表转为会话格式，合并到chats数组（标记isGroup: true）
    const groupChats = userGroups.value.map(group => ({
      id: group.id, // 会话ID=群ID
      name: group.groupName, // 群名称
      avatar: "@/assets/HomePage/weixin.svg", // 可自定义群头像（暂空）
      lastMessage: '点击进入群聊',
      lastMessageTime: new Date().toISOString(),
      unreadCount: 0,
      isGroup: true // 关键：标记为群聊
    }));
    // 合并群会话和好友会话（群聊在前/后均可）
    chats.value = [...groupChats, ...chats.value];
  } catch (err) {
    console.error('加载群列表失败:', err);
  }
};
// 3. 创建群聊逻辑（弹窗+调用接口）
const handleCreateGroup = async () => {
  if (!groupName.value.trim() || !userId) return;
  try {
    // 调用后端/group/create接口
    const groupId = await global.$http.post(`http://localhost:8030/group/create`, null, {
      params: {ownerId: userId, groupName: groupName.value}
    });
    // 创建成功后刷新群列表
    loadUserGroups();
    groupDialogVisible.value = false;
    groupName.value = '';
  } catch (err) {
    console.error('创建群聊失败:', err);
  }
};

// 4. 改造handleSelectChat：跳转聊天详情页时，传递群ID（区分单聊/群聊）
const handleSelectChat = (chat) => {
  chat.unreadCount = 0;
  const queryParams = {
    currentUserId: userId,
    ...(chat.isGroup ? {groupId: chat.id, groupName: chat.name} : {friendId: chat.id, friendName: chat.name})
  };
  router.push({
    path: '/ChatDetail',
    query: queryParams
  });
};

//  先加载好友会话，再加载群会话
onMounted(() => {
  loadHistoryChats().then(() => {
    loadUserGroups(); // 新增：加载群列表
    initWebSocket();
  });
});
// 组件卸载时关闭连接（保持不变）
onUnmounted(() => {
  if (ws.value) {
    ws.value.close();
  }
});
</script>


<template>
  <el-container class="chat-container">
    <!-- 顶部导航栏：新增「创建群聊」按钮 -->
    <el-header class="chat-header">
      <div class="header-content">
        <h4 class="page-title">微信</h4>
        <div>
          <el-button type="primary" size="small" @click="groupDialogVisible = true">创建群聊</el-button>
          <el-badge :value="isConnected ? '在线' : '离线'" :type="isConnected ? 'success' : 'danger'"
                    class="status-badge">
          </el-badge>
        </div>
      </div>
    </el-header>

    <!-- 会话列表区域-->
    <el-main class="chat-list-container">
      <el-scrollbar v-if="chats.length > 0" class="chat-list">
        <!-- 直接渲染chat-item（使用WebSocket返回的真实数据）-->
        <div
            v-for="chat in chats"
            :key="chat.id"
            class="chat-item"
            @click="handleSelectChat(chat)"
        >
          <!-- 头像和未读标记 -->
          <div class="chat-item-avatar">
            <el-badge
                :value="chat.unreadCount"
                :is-dot="chat.unreadCount === 1 && !chat.isGroup"
                v-if="chat.unreadCount > 0"
                class="unread-badge"
            >
              <el-avatar :src="chat.avatar">
                <template #fallback>
                  {{ chat.name.substring(0, 2) }}
                </template>
              </el-avatar>
            </el-badge>
            <el-avatar :src="chat.avatar" v-else>
              <template #fallback>
                {{ chat.name.substring(0, 2) }}
              </template>
            </el-avatar>
          </div>

          <!-- 主要内容区域 -->
          <div class="chat-item-content">
            <div class="chat-info">
              <div class="chat-name-container">
                <span class="chat-name">{{ chat.name }}</span>
                <span class="chat-time">{{ formatTime(chat.lastMessageTime) }}</span>
              </div>
              <p class="last-message">
                <span v-if="chat.isGroup" class="group-sender">{{ chat.lastMessageSender }}: </span>
                {{ chat.lastMessage }}
              </p>
            </div>
          </div>
        </div>
      </el-scrollbar>
      <div v-else class="no-results">暂无会话</div>
    </el-main>
    <!-- 新增：创建群聊弹窗 -->
    <el-dialog title="创建群聊" v-model="groupDialogVisible" width="50%" class="mobile-dialog">
      <el-input v-model="groupName" placeholder="请输入群聊名称" class="mb-4"/>
      <template #footer>
        <el-button @click="groupDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleCreateGroup">创建</el-button>
      </template>
    </el-dialog>
  </el-container>
</template>


<style scoped>
/* 样式完全保持不变 */
.chat-container {
  height: 100vh;
  overflow: hidden;
}

.chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  padding: 0 20px;
}

.header-content {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
}

.page-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
}

.status-badge {
  margin-left: 10px;
}

.chat-list-container {
  padding: 0;
  overflow-y: auto;
  background-color: #f5f7fa;
}

.chat-list {
  background-color: #fff;
  height: 100%;
}

.chat-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.chat-item:hover {
  background-color: #f5f7fa;
}

.chat-item-avatar {
  flex-shrink: 0; /* 头像不收缩 */
}

.chat-item-content {
  flex: 1;
  min-width: 0; /* 允许内容区域收缩 */
}

.chat-info {
  width: 100%;
}

.chat-name-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
  white-space: nowrap;
}

.chat-name {
  font-weight: 500;
  font-size: 15px;
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-time {
  font-size: 12px;
  color: #909399;
  flex-shrink: 0;
  margin-left: 8px;
}

.last-message {
  margin: 0;
  font-size: 14px;
  color: #606266;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.group-sender {
  color: #909399;
}

.unread-badge {
  --el-badge-background-color: #f56c6c;
}

.no-results {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-color: #fff;
}

::v-deep .el-avatar {
  width: 50px !important;
  height: 50px !important;
  border-radius: 8px !important;
}

@media (max-width: 768px) {
  .chat-name {
    max-width: 50%;
  }

  .last-message {
    font-size: 13px;
  }
}

@media (max-width: 768px) {
  .chat-name {
    max-width: 50%;
  }

  .last-message {
    font-size: 13px;
  }

  @media (max-width: 480px) {
    .mobile-dialog .el-dialog__wrapper {
      width: 95% !important;
      max-width: 320px !important;
      margin: 0 auto !important;
    }

    .mobile-dialog .el-dialog__body {
      padding: 15px 20px !important;
    }

    .mobile-dialog .el-dialog__footer {
      padding: 10px 20px 15px !important;
    }

    .mobile-dialog .el-input {
      width: 100% !important;
    }
  }
}
</style>
